<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2024-02-29 21:51:18
 * @LastEditors: htang
 * @LastEditTime: 2024-03-01 01:58:12
-->
<template>
  <a-modal v-model:visible="visible" :title="activeIndex == 1 ? '维修工单退回' : '维修工单处理'" @ok="handleOk">
    <div style="margin: 12px">
      <a-form ref="ruleForm" :model="model" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="处理描述：">
          <a-input type="textara" v-model:value="model.handleDescription" />
        </a-form-item>
        <a-form-item label="附件" name="handleAttachment">
          <a-upload
            name="file"
            :action="ossAction"
            v-model:file-list="fileList"
            list-type="picture-card"
            :headers="tokenHeader"
            :showUploadList="true"
            @change="handleUploadChange"
          >
            <div class="flex items-center justify-end upload-form-item" title="点击上传文件">
              <i class="ico"></i>
              <span>上传</span>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { watch, ref, nextTick, defineComponent, getCurrentInstance, computed } from 'vue';
import { signbackOrderApi, repairOrderApi } from '/@/api/order/index';
import { createVNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
import { useGlobSetting } from '/@/hooks/setting';
import { getToken } from '/@/utils/auth';
export default defineComponent({
  setup(props, { emit }) {
    let visible = ref(false);

    let model = ref({
      orderId: 0,
      // 人员处理附件
      handleAttachment: '',
      // 处理描述
      handleDescription: '',
    });

    let fileList = ref([]);

    let activeIndex = ref(0);

    const glob = useGlobSetting();
    const ossAction = computed(() => `${glob.uploadUrl}/sys/common/upload`);

    const tokenHeader = { 'X-Access-Token': getToken() };

    // 用户列表
    let userList = ref([]);

    function init(data, idx) {
      activeIndex.value = idx;
      console.log(activeIndex.value);
      model.value = {
        ...data,
      };
    }

    /**
     * 上传成功后组将成文件列表
     */
    function handleUploadChange(e) {
      if (e.file.response) {
        fileList.value = [];
        let fileName = e.file.response.message;
        const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
        let url = `http://27.45.145.110:3200/api/${fileName}`;
        fileList.value.push({
          name: fileName,
          url,
          type: `.${fileExtension}`,
        });
      }
    }

    watch(
      () => visible.value,
      (val) => {
        if (val) {
          model.value = {
            orderId: 0,
            // 人员处理附件
            handleAttachment: '',
            // 处理描述
            handleDescription: '',
          };
        }
      }
    );

    function handleOk() {
      let list = fileList.value.map((item) => item.url);
      let data = {
        ...model.value,
        handleAttachment: list.join(','),
      };
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: activeIndex.value == 1 ? '确定回退当前工单?' : '确定维修处理当前工单?',
        centered: true,
        onOk() {
          if (activeIndex.value == 1) {
            signbackOrderApi(data).then((res) => {
              message.success('退回成功');
              visible.value = false;
              emit('oks');
            });
          } else {
            repairOrderApi(data).then((res) => {
              message.success('处理成功');
              visible.value = false;
              emit('oks');
            });
          }
        },
      });
    }

    return {
      visible,
      userList,
      model,
      ossAction,
      fileList,
      tokenHeader,
      activeIndex,
      handleUploadChange,
      handleOk,
      init,
    };
  },
});
</script>